<template>
  <div id="previewWrapper">
    <div class="preview_header">
      <h1 title="jason的简历">{{resume.name}}的简历</h1>
        </div><!--end .preview_header-->

    <div class="preview_content">
        <div class="profile_box" id="basicInfo">
        <h2>基本信息</h2>
        <div class="basicShow">
        <span>姓名：{{resume.name}} |  {{resume.sex}} | {{resume.maxDegree}} | {{resume.workExp}} <br>
            <br>
            电话：{{resume.telepone}} |电子邮件： {{resume.email}}<br>
        </span>
          <div class="m_portrait">
            <div></div>
            <img v-if="resume.headerImg" :src="this.$config.url+this.resume.headerImg" class="avatar">
            <div v-else><img src="../resume/img/default_headpic.png"
                             style=" width: 120px; height: auto;"></div>
          </div>
        </div><!--end .basicShow-->
      </div><!--end #basicInfo-->

      <div class="profile_box" id="educationalBackground">
        <h2>教育背景</h2>
        <div class="educationalShow">
          <ul class="elist clearfix" v-for="item in educations" :key="item.educationId">
            <li class="clear">

                <h3>{{item.school}} <span class="c9">{{dataUtil(item.stattime)}}至{{dataUtil(item.stoptime)}}</span></h3>
            </li>
            <li>
              <h4>学历：{{item.qualifications}} | 专业：{{item.major}}</h4>
              <h4>在校经历：{{item.schoolExp}}</h4>
            </li>
          </ul>
        </div><!--end .educationalShow-->
      </div><!--end #educationalBackground-->

      <div class="profile_box" id="skill">
        <h2>掌握技能</h2>
        <div class="descriptionShow">
          {{this.resume.skill}}
        </div><!--end .descriptionShow-->
      </div><!--end #selfDescription-->


      <div class="profile_box" id="selfDescription">
        <h2>自我描述</h2>
        <div class="descriptionShow">
          {{this.resume.evaluation}}
        </div><!--end .descriptionShow-->
      </div><!--end #selfDescription-->

    </div><!--end .preview_content-->
  </div><!--end #previewWrapper-->

</template>

<script>
  import {makeSimpleDate,makeDate} from "../../common/js/dateformat"
  export default {
    name: "preview",
    props:{//父组件传一个userId过来
      userId: Number,
    },
    created(){
      this.getResume()
    },
    data(){
      return{
        resume: {
          resumeId: '',
          name: "",
          sex: "",
          birthdate: '',
          telepone: "",
          maxDegree: "",
          email: "",
          skill: "",
          evaluation: "",
          resumefile: "",
          userUpdateTime: '',
          headerImg: "",
        },
        educations:[],
      }
    },
    methods:{
      //获得简历
      getResume() {
        this.loading=true;
        this.$ajax.post(this.$config.url + `/resume/selectByUserId/${this.userId}`)
            .then(res => {
              if(res.data.message=="null"){
                this.$message.warning("无简历信息，请添加");
                this.noResume=true;
              }else{
                this.resume=res.data.object;
                if(res.data.object.educations!=null){
                  this.educations=res.data.object.educations;
                }
              }
            }).finally(() => {
          this.loading=false;
        })
      },
      dataUtil(date) {
        return makeSimpleDate(date)
      },
      makeDate(date){
        return makeDate(date)
      },
    }
  }
</script>

<style scoped>
  #previewWrapper{width:700px;border:12px solid #a3a3a3;margin:0 auto}
  #previewWrapper .preview_header{height:26px;background:#019875;padding:9px 20px;color:#fff;overflow:hidden}
  #previewWrapper .preview_header h1{margin:0;font-size:18px;font-weight:600;line-height:26px;float:left}
  #previewWrapper .preview_header a{float:right;background:#006b52;color:#fff;padding:2px 12px}
  #previewWrapper .preview_content{padding:32px 20px 2px 20px}
  #previewWrapper .preview_content .expectShow{padding:0 10px 0 20px}
  #previewWrapper .projectList .f16,#previewWrapper .workList .f16{*margin-top:0}
  .profile_box{clear:both;background: #fafafa;border:2px solid #fafafa;word-wrap:break-word; padding:18px; margin-bottom: 20px; position: relative;}
  .profile_box td{vertical-align: top;}
  .profile_box span.error{margin:3px 0 0 0;}
  .profile_box h2 span{color:#777;}
  .profile_box .c_add{right: 7px;top:7px;}
  .profile_box .pAdd:hover{background-position: 20px -76px;}
  .profile_box .pAdd span{display:block;font-size:16px;color: #0d9572; text-decoration: underline; margin-top: 5px;}
  .profile_box td{padding:8px 0 8px 20px;}
  .m_portrait {float:left; width:122px; height:122px;}
  .m_portrait img{width:120px; height:120px; position:absolute; z-index:4;}
  #basicInfo{min-height:116px;}
  #basicInfo .basicEdit{overflow: hidden;padding:0;}
  #basicInfo .basicShow{font-size:16px;padding:0 130px 0 20px; line-height: 28px; position: relative;}
  #basicInfo .basicShow span.nofill{color:#e46a4a;}
  #basicInfo .basicShow .m_portrait{position: absolute;right: 0; top: -35px;}
  #educationalBackground{*z-index:27;}
  #workExperience .experienceShow,#educationalBackground .educationalShow{font-size:16px;}
  #workExperience .experienceShow ul.wlist,#educationalBackground .educationalShow ul.elist{list-style:none;margin:20px 5px 10px 5px;padding:0 0 0 10px;}
  #workExperience .experienceShow .wlist li,#educationalBackground .educationalShow .elist li{float:left;width:500px;margin:0px 0px;position:relative;}
  #educationalBackground .educationalShow li div{background:#fff;width:276px;padding:0 7px;overflow:hidden}
  #educationalBackground .educationalShow li h3{float:left;width:100%;font-size:18px;font-weight:500;margin:5px 0;}


</style>